<template>
  <div>
    <div class="demo-step">
      <p class="demo-inner-divider">步骤条  steps-default</p>
      <e-steps :current="1">
        <e-step title="这是第1步"></e-step>
        <e-step title="这是第2步"></e-step>
        <e-step title="这是第3步"></e-step>
      </e-steps>
    </div>
    <div class="demo-step">
      <p class="demo-inner-divider">有状态的步骤条  steps-status</p>
      <e-steps :current="2">
        <e-step title="这是第1步" status="finish"></e-step>
        <e-step title="跳过" status="wait">
          <template v-slot:icon>
            <div class="jump-icon">
              <e-icon :size="13" type="ellipsis" color="#ffffff"></e-icon>
            </div>
          </template>
        </e-step>
        <e-step title="这是第3步" status="process"></e-step>
      </e-steps>
    </div>
    <div class="demo-step">
      <p class="demo-inner-divider">有icon的步骤条</p>
      <e-steps :current="0">
        <e-step title="步骤一" icon="default"></e-step>
        <e-step title="步骤二" icon="default"></e-step>
        <e-step title="步骤三" icon="default"></e-step>
      </e-steps>
    </div>
    <div class="demo-step">
      <p class="demo-inner-divider">有描述步骤条  steps-content</p>
      <e-steps :current="0">
        <e-step title="步骤一" content="处理描述有点多有点多有点多有点多有点多有点多有点多有点多有点多有点多有点多有点多有点多有点多有点多有点多有点多有点多有点多有点多有点多有点多不得不换行"></e-step>
        <e-step title="步骤二" content="处理描述有点多有点多不得不换行"></e-step>
        <e-step title="步骤三" content="处理描述有点多有点多不得不换行"></e-step>
      </e-steps>
    </div>
    <div class="demo-step">
      <p class="demo-inner-divider">纵向步骤条  steps-vertical</p>
      <e-steps :current="1" direction="vertical">
        <e-step title="已完成"></e-step>
        <e-step title="进行中"></e-step>
        <e-step title="未完成"></e-step>
      </e-steps>
    </div>
    <steps-md class="markdown-body"></steps-md>
  </div>
</template>

<script>
import stepsMd from '../../docs/steps.md';

export default {
  name: 'DemoSteps',
  components: { stepsMd },
};
</script>

<style scoped>
.demo-step {
  margin-bottom: 30px;
}

.jump-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #D9D9D9;
  border: 2px solid #D9D9D9;
}
</style>
